<template>
  <el-card>
    <div class="top">
      <div class="left">
        <el-input
          placeholder="请输入医生姓名"
          clearable
          class="input"
          v-model="doctorName"
        ></el-input>
        <el-button type="primary" icon="Search" @click="filterDoctorList">搜索</el-button>

        <el-button icon="Refresh" @click="reste">重置</el-button>
      </div>
      <div class="right">
        <el-button type="primary" icon="Plus" @click="AddDoctors">添加医生</el-button>
      </div>
    </div>
  </el-card>
  <el-card class="content">
    <el-table :data="doctorList" border class="table" max-height="550px">
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        label="姓名"
        align="center"
        prop="name"
        width="140"
      ></el-table-column>
      <el-table-column label="性别" align="center" prop="sex" width="100"></el-table-column>
      <el-table-column label="年龄" align="center" prop="age" width="100"></el-table-column>
      <el-table-column label="医生头像" align="center" width="140">
        <template #default="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.photo"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="手机号"
        align="center"
        prop="phone"
        width="140"
      ></el-table-column>
      <el-table-column label="所属科室" align="center">
        <template #default="{ row }">
          {{ row?.depart?.DepartName }}
        </template>
      </el-table-column>
      <el-table-column
        label="所属二级科室"
        align="center"
        prop="TweDepart"
      ></el-table-column>
      <el-table-column label="职位" align="center">
        <template #default="{ row }">{{ row?.job?.jName }}</template>
      </el-table-column>

      <el-table-column label="是否在职" align="center">
        <template #default="{ row }">
          <el-tag type="success" v-if="row.isAutonym == 1">在职</el-tag>
          <el-tag type="danger" v-else>离职</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template #default="{ row }">
         
          <el-button
            type="success"
            icon="InfoFilled"
            title="医生详情"
            size="small"
            @click="showDwaper(row._id)"
          ></el-button>
          <el-button
            type="info"
            icon="edit"
            title="修改医生"
            size="small"
            @click="updateDoctor(row._id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    class="page"
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 30, 40,50]"
      background
      layout="prev, pager, next, jumper,total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <AddDoctor v-model="dialogVisible" :getDoctorList="getDoctorList" :id="id" @changeId="changeId"></AddDoctor>
  <el-drawer v-model="drawer"  size="670px" >
    <template #header>
      <h4 class="detail-title">医生详情</h4>
    </template>
    <el-descriptions
    class="margin-top"
    title="医生详情"
    :column="2"
    
    border
  >
 
    <el-descriptions-item>
      <template #label>
        <div >
          <el-icon >
            <user />
          </el-icon>
          医生名称
        </div>
      </template>
      {{ doctorInfo?.name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div >
          <el-icon><Avatar /></el-icon>
          医生性别
        </div>
      </template>
     <el-tag > {{ doctorInfo?.sex }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div >
          <el-icon >
            <iphone />
          </el-icon>
          联系方式
        </div>
      </template>
      {{ doctorInfo?.phone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div >
          <el-icon >
            <location />
          </el-icon>
          科室名称
        </div>
      </template>
     <el-tag type="primary" size="small"> {{ doctorInfo?.depart?.DepartName }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div >
          <el-icon >
            <tickets />
          </el-icon>
          科室描述
        </div>
      </template>
      {{ doctorInfo?.depart?.DepartContent }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div >
          <el-icon >
            <office-building />
          </el-icon>
          二级科室名称
        </div>
      
      </template>
     <el-tag type="success" size="small"> {{ doctorInfo?.TweDepart }}</el-tag>

    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div >
          <el-icon >
            <User />
          </el-icon>
          职位名称
        </div>
      </template>
      <el-tag type="info" size="small"> {{ doctorInfo?.job?.jName }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div >
          <el-icon><Calendar /></el-icon>
          入院时间
        </div>
      </template>
    {{ doctorInfo?.createAt?.split('T')[0] }}
 
    </el-descriptions-item>
    <el-descriptions-item align="center" class="image">
      <template #label>
        <div class="cell-item">
          <el-icon><Picture /></el-icon>
          医生头像
        </div>
      </template>
      <el-image
      style="width: 100px; height: 100px"
      :src="doctorInfo?.photo"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[doctorInfo?.photo]"
      :initial-index="0"
      fit="cover"
    />
 
    </el-descriptions-item>
  </el-descriptions>

  </el-drawer>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { GetDoctorListAPI } from "@/api/user";
import { GetDoctorDetailAPI } from '@/api/user'
import AddDoctor from './AddDoctor/index.vue'
let doctorList = ref([]);
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0)
let dialogVisible = ref(false);
let id = ref('')
let doctorName=ref('')
let drawer = ref(false)
let doctorInfo = reactive({})
onMounted(() => {
  getDoctorList();
});
const getDoctorList = async () => {
  let result = await GetDoctorListAPI(pageNo.value,pageSize.value);
  doctorList.value = result.data;
  total.value = result.total;
};
const filterDoctorList = ()=>{
  doctorList.value = doctorList.value.filter(item=>item.name.includes(doctorName.value))
}
const updateDoctor = (ids)=>{
  id.value = ids
  dialogVisible.value = true
}
const reste = ()=>{
  doctorName.value = ''
  getDoctorList()
}
const showDwaper = async (rowId)=>{
  drawer.value = true
  let result = await GetDoctorDetailAPI(rowId)
  Object.assign(doctorInfo,result.data)
}

const handleSizeChange = (val) => {
  
  getDoctorList();
}
const handleCurrentChange = (val) => {
 
  getDoctorList();
}
const AddDoctors = ()=>{
  dialogVisible.value = true
}
const changeId = (ids)=>{
  id.value = ids
}
</script>

<style lang="scss" scoped>
.content {
  margin: 10px 0px;
  .table {
    margin: 10px 0px;
  }
  .page {
    display: flex;
    margin-top: 11px;
    justify-content: center;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    .input {
      margin-right: 10px;
    }
  }
}
.detail-title {
  font-size: 30px;
  font-weight: 700;
  color: #1f1e1e;
 
}


</style>
